<template>
  <div class="Chief-Ten" chief-style-set>
    <Title title="法律诉讼情况" more :MoreUrl='MoreJump(this, "OperatingCondition", 6)'></Title>
    <div class="content-h-auto" chief-style-set>
      <div class="left-box content-box">
        <div class="chart">
          <pie-charts :pChartsOption="ChartsOption1"></pie-charts>
        </div>
      </div>
      <div class="right-box content-box">
        <div class="chart">
          <pie-charts :pChartsOption="ChartsOption2"></pie-charts>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/baseTitle";
import pieCharts from "@/components/portalEcharts/PieEcharts";
import { rptVisPrjLawstatus } from "@/api/portalChief";
import { MoreJump } from "@/util/util";
export default {
  name: "Chief-Ten",
  components: {
    Title, pieCharts
  },
  data () {
    return {
      ChartsOption1: {},
      ChartsOption2: {},
      MoreJump
    };
  },
  created () {
    rptVisPrjLawstatus(this.$store.state.user.project.projectNo).then(res => {
      this.disposeData(res);
    });
  },
  methods: {
    // eslint-disable-next-line valid-jsdoc
    /**
    * 方法描述描述
    * @param {Object} res 参数作用
    */
    disposeData (res) {
      if (res.status === 200) {
        let data = res.data.data;
        this.ChartsOption1 = {
          needlabel: false,
          radius: "55%",
          data: [
            {
              value: data[0].data["被告"],
              name: "被告",
              color: "#2B4079"
            },
            {
              value: data[0].data["原告"],
              name: "原告",
              color: "#F99547"
            }
          ]
        };
        this.ChartsOption2 = {
          needlabel: false,
          radius: "55%",
          data: [
            {
              value: data[1].data["未开庭"],
              name: "未开庭",
              color: "#90B0EB"
            },
            {
              value: data[1].data["再审"],
              name: "再审",
              color: "#719EEF"
            },
            {
              value: data[1].data["二审"],
              name: "二审",
              color: "#4473C3"
            },
            {
              value: data[1].data["一审"],
              name: "一审",
              color: "#273D6F"
            }
          ]
        };
      }
    }
  }
};
</script>

<style lang="less" scoped>
.Chief-Ten{
}

.content-h-auto{
  >div{
    display: inline-block;
    width: 50%;
    position: absolute;
    top: 0;
    bottom: 0;
  }
  .content-box{
    display: flex !important;
    flex-direction: column;
    >div{
      flex:1;
      text-align: center;
    }
    .chart{
      flex: 5;
    }
  }
}
</style>